<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>配置参数</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>


        <!-- cdn -->
        <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script> -->
    </head>



    <body>



        <form class="layui-form" action="" id="uploadForm" enctype="multipart/form-data">
            <input type="hidden" name="id" id="id" value="#(id)">
            <input type="hidden" name="channelId" id="channelId" value="#(channelId)">
            <input type="hidden" name="merchantId" id="merchantId" value="#(merchantId)">
            <!--    ----------------填写基本信息start------ -->
            <div class="layui-card step-card" id="step_card_1">
                <div class="layui-card-header">填写基本信息</div>

                <div class="layui-card-body">
                    <!--merchant_id
            xyf_merchant_no
            sign_type
            private_key
            public_key
            md5_key-->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="require-mark">*</em>商户号</label>
                        <div class="layui-input-inline" style="width: 350px;">
                            <input type="text" name="xyfMerchantNo" id="xyfMerchantNo" maxlength="30" placeholder="商户号"
                                class="layui-input" lay-verify="required" value="#(channelConfig.xyfMerchantNo)"
                                required autocomplete="off" />
                        </div>

                    </div>

                    <div class="layui-form-item">


                        <input type="hidden" id="defaultSignType" name="defaultSignType" value="RSA" />
                        <label class="layui-form-label"><em class="require-mark">*</em>加密类型</label>
                        <div class="layui-input-inline" style="width: 350px;">
                            <select name="signType" id="signType" lay-filter="signType" >


                                <option value="MD5">MD5</option>
                                <option value="RSA">RSA</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item MD5">
                        <label class="layui-form-label"><em class="require-mark">*</em>MD5密钥</label>
                        <div class="layui-input-inline" style="width: 350px;">
                            <input type="text" name="md5Key" id="md5Key" maxlength="255" placeholder="请输入您的MD5密钥" class="layui-input "
                                value="#(channelConfig.md5Key)" required autocomplete="off" />
                        </div>
                    </div>

                    <div class="layui-form-item RSA">
                        <label class="layui-form-label"><em class="require-mark">*</em>公钥</label>
                        <div class="layui-input-inline" style="width: 350px;">
                            <input type="text" name="publicKey" id="publicKey" maxlength="255" placeholder="请输入您的公钥"
                                class="layui-input " value="#(channelConfig.publicKey)" required autocomplete="off" />
                        </div>
                    </div>

                    <div class="layui-form-item RSA">
                        <label class="layui-form-label"><em class="require-mark">*</em> 私钥 </label>
                        <div class="layui-input-inline" style="width: 350px;">
                            <input type="text" name="privateKey" id="privateKey" maxlength="255" placeholder="请输入您的私钥"
                                class="layui-input " value="#(channelConfig.privateKey)" required autocomplete="off" />
                        </div>
                    </div>

                    <div class="layui-form-item" style="border-top:1px solid #ddd;padding-top:15px;text-align:center;width:100%;">
                        <button class="layui-btn" lay-filter="add" lay-submit>提交</button>
                    </div>

                </div>
            </div>
            <!--    ----------填写基本信息end--------------------  -->

        </form>


        <script>
            //Demo

            layui.use(['form', 'element', 'layer'], function() {
                var form = layui.form;
                var element = layui.element;
                var layer = layui.layer;
                var $ = layui.jquery;
                var defaultSignType = $("#defaultSignType").attr("value");


                defaultSignType = "RSA";
                console.log($("#signType  option[value='RSA']").val());
                console.log($("#signType").find("option[value=RSA]").val());
                // $("#signType").find("option[value=" + defaultSignType + "]").prop("selected", true);

                $("#signType option[value='RSA']").prop("selected", true);


                /*   if (defaultSignType == "" || defaultSignType== undefined) {
                      defaultSignType = "MD5";
                      $("#signType").find("option[value=" + defaultSignType + "]").prop("selected", true);
                    //  $("#signType").find("option[value=" + defaultSignType + "]").prop("selected", true);

                    } else {
                      //rsa
                       defaultSignType = "RSA";
                      $("#signType").find("option[value=" + defaultSignType + "]").prop("selected", true);
                    } */



                /*       layer.alert(
                        "CaO(艹氧化钙艹)" +
                        $("#signType").val()

                      ); */
                /* 没用, layui 的渲染已经屏蔽掉了jQuery的方法, 多么痛彻的领悟
                    $("#signType").change(function () {
                      $("#signType").css("background-color", "#FFFFCC");
                      alert($("#signType").val());
                    });
                */

                if (defaultSignType == "MD5") {

                    $("div.RSA").hide();
                } else if (defaultSignType == "RSA") {

                    $("div.MD5").hide();
                } else {

                    $("div.MD5").hide();
                    $("div.RSA").hide();
                }



                //监听提交
                form.on('submit(formSubmit)', function(data) {
                    layer.msg(JSON.stringify(data.field));
                    return true;
                });

                //监听select 下拉框 按filter 绑定取值
                form.on('select(signType)', function(data) {

                    /*
                    console.log(data.elem); //得到select原始DOM对象
                    console.log(data.value); //得到被选中的值
                    console.log(data.othis); //得到美化后的DOM对象 */
                    if (data.value == "RSA") {
                        $("div.RSA").show();
                        $("div.MD5").hide();
                    } else if (data.value == "MD5") {
                        $("div.MD5").show();
                        $("div.RSA").hide();
                    }


                });
            });
        </script>


    </body>

</html>
